<template>
	<view class="nav">

		<view :style="'height:'+statusheight+'rpx;'+containerStyle"></view>
		<view v-if="isHome" class="headNav" :style="'background-color:white;'+'height:' + navconheight + 'rpx;line-height:' + navconheight +'rpx;padding-left:20rpx;'">
			<text class="city">高唐县</text>
			<!-- <view style="flex: 1">
				<navigator
					url="../../pages/mysearch/index"
					:style="
						'height:' +
						menu.height*2 +
						'rpx;line-height:' +
						menu.height*2 +
						'rpx;margin-top:' + 
						(menu.top*2 - statusheight) +
						'rpx;margin-left:32rpx;margin-right:' +
						(menu.width*2 + 24) + 
						'rpx;background: #f4f4f4;border-radius:200rpx;text-align:center'
					"
				>
					<text class="search-text">找医院</text>
				</navigator>
			</view> -->
		</view>
		<view v-else class="navbar" :style="'height:'+navconheight+'rpx;'+containerStyle">
			<view class="back-icon" @click="backorHome">
				<image v-if="pages>1" src="@/static/navbar/ic_back.png"></image>
				<image v-else src="@/static/navbar/ic_home.png"></image>
			</view>
			<view class="nav-title" v-if="props.titleText">
				<view :style="`height:${navconheight}rpx;line-height:${navconheight}rpx;${textStyle}`">
					{{props.titleText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		reactive,
		ref
	} from 'vue';
	const props = defineProps({
		myBackground: {
			type: String,
			default: "rgba(255,255,255)"
		},
		myColor: {
			type: String,
			default: "rgba(0,0,0)"
		},
		myFontSize: {
			type: String,
			default: 32
		},
		myIconWidth: {
			type: String,
			default: 116
		},
		myIconHeight: {
			type: String,
			default: 38
		},
		titleText: {
			type: String,
			default: ''
		},
		isHome: {
			type: Boolean,
			default: false
		}
	})
	onBeforeMount(() => {
		setNavSize()
		setStyle()
	})
	const statusheight = ref(0) //状态栏高度
	const navconheight = ref(0) //内容高度
	const setNavSize = async () => {
		const {
			system,
			statusBarHeight
		} = await uni.getSystemInfo()
		const res = await uni.getSystemInfo()
		console.log('res', res);
		statusheight.value = res.statusBarHeight * 2
		if (!uni.getSystemInfoSync().platform == "ios") {
			navconheight.value = 96
		} else {
			navconheight.value = 88
		}
	}
	const containerStyle = ref('')
	const textStyle = ref('')
	const iconStyle = ref('')
	const setStyle = () => {
		containerStyle.value = `background:${props.myBackground}`
		textStyle.value = `color:${props.myColor};font-size:${props.myFontSize}rpx;`
		iconStyle.value = `width:${props.myIconWidth}rpx;height:${props.myIconHeight}`

	}
	const pages = ref(getCurrentPages().length)
	console.log("pages", pages);
	const backorHome=()=>{
		if(pages.value>1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url:'/pages/index/index'
			})
		}
	}
	const menu=reactive(uni.getMenuButtonBoundingClientRect())
</script>

<style lang="scss">
	.nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.back-icon {
		display: flex;
		align-items: center;
		width: 64rpx;
		height: 100%;
		margin-left: 20rpx;
	}

	.back-icon image {
		width: 64rpx;
		height: 64rpx;
	}

	.navbar {
		position: relative;
	}

	.nav-title {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}
	.headNav{
		display: flex;
	}
	.city {
	    display: inline-block;
	    position: relative;
	    font-size: 30rpx;
	    font-weight: bold;
	    padding-left: 55rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 40rpx;
	}
	
	.city:after {
	    content: ' ';
	    display: inline-block;
	    height: 6px;
	    width: 6px;
	    border-width: 1px 1px 0 0;
	    border-color: #353535;
	    border-style: solid;
	    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    position: relative;
	    top: -2px;
	    position: absolute;
	    top: 50%;
	    margin-top: -4px;
	    right: -10px;
	}
	.search-text {
	    display: inline-block;
	    padding-left: 30rpx;
	    color: #bbbbbb;
	    font-size: 26rpx;
	    background: url()
	        no-repeat left center;
	    background-size: 23rpx;
	}
</style>